<template>
	<section class="history">
		<div class="tab-box">
			<div class="tab-hd-wrap" v-ofshow="'.tab-hd'">
				<div class="tab-hd clearfix">
					<div class="tab-hd-item" 
					v-for="(item, index) in historyList" 
					:class="{'active':index == 1}"
					>{{item.subTitle}}
					<i class="icon icon-tuichu" @click="changeHistoryList(index)"></i>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
	export default {
		data () {
			return {}
		},
		mounted () {

			// console.log('this.historyList', this.historyList)
		},
		props: ['historyList'],
		methods:{
			changeHistoryList: function (index) {
				//删除某一个项目
				typeof index == 'number' ? this.$emit('changeHistoryList', index) : null;
			}
		}

	}
</script>

<style lang="less" scoped>
	@import url("../../assets/css/variable.less");
	@import url("../../assets/css/public.less");
	.tab-box{
		&{
			font-size: @ft-size;
		}
		.tab-hd-wrap{
			&{
				.scrollbar(@trumbbg:@main-tint-bg;@trackpiecebg: #e4e4e4;);
				padding-bottom: 0px;
				overflow: auto;
				background: @main-purle-bg;
			}
		}
		.tab-hd{
			height: 40px;
			line-height:40px;
			color: @color;
			background: @main-purle-bg;
			white-space: nowrap;
		}
		.tab-hd-item{
			&{
				display: inline-block;
				height: 38px;
				line-height: 36px;
				background: @main-purle-bg;
				padding: 0 30px;
				margin: 0 0 0 4px;
				border-top: 2px solid @main-purle-bg;
				cursor: pointer;
			}
			&:hover .icon{
				display: inline-block;
			}
		}
		.icon{
			&{
				position: absolute;
				margin: 0 0px 0 6px;
				display: none;
			}
		}

		.tab-hd-item.active{
			background: @color;
			color: @border-color-3;
			border-top-color: @border-color-3;
		}
	}
	@-webkit-keyframes rotateIconX{
		0%{-webkit-transform-origin:center center;
		-webkit-transform:rotate(-200deg);
		}
		100%{-webkit-transform-origin:center center;
		-webkit-transform:rotate(0deg);
		}
	}
	@-moz-keyframes rotateIconX{
		0%{-moz-transform-origin:center center;
		-moz-transform:rotate(-200deg);
		}
		100%{-moz-transform-origin:center center;
		-moz-transform:rotate(0deg);
		}
	}
	@keyframes rotateIconX{
		0%{transform-origin:center center;
		transform:rotate(-200deg);
		}
		100%{transform-origin:center center;
		transform:rotate(0deg);
		}
	}

@-webkit-keyframes rotateIn{
0%{-webkit-transform-origin:center center;
-webkit-transform:rotateX(-200deg);
}
100%{-webkit-transform-origin:center center;
-webkit-transform:rotateX(0);
}
}
@-moz-keyframes rotateIn{
0%{-moz-transform-origin:center center;
-moz-transform:rotateX(-200deg);
}
100%{-moz-transform-origin:center center;
-moz-transform:rotateX(0);
}
}
</style>